<template>
  <div class="day-done-production font-14 color-333">
    <line-logo :name="$i18n.t('mesProductionDailyClear.productionStatus')" />
    <!-- 1 -->
    <div class="day-done-wrapper ">
      <div class="day-done-wrapper__item mt-8 relative" style="height: 150px">
        <div style="width: 400px;height: 200px" class="absolute chart-move">
          <v-charts :option="options1" style="width: 100%;height: 100%" />

        </div>
        <div class="absolute chart-info-move">
          <div class="flex align-center py-16 border-bottom-EBF0F5 relative pl-16">
            <span class="color-5A6F82">{{ $i18n.t("mesProductionDailyClear.planToStart") }}</span>
            <strong class="ml-24">{{ dataItem.planWork }}</strong>
          </div>
          <div class="flex align-center py-16 border-bottom-EBF0F5 relative pl-16">
            <span class="color-5A6F82">{{ $i18n.t("mesProductionDailyClear.actualWork") }}</span>
            <strong class="ml-24">{{ dataItem.realWork }}</strong>
          </div>
          <div class="flex align-center py-16 border-bottom-EBF0F5 relative pl-16">
            <span class="color-5A6F82">{{ $i18n.t("mesProductionDailyClear.difference") }}</span>
            <strong class="ml-24">{{ dataItem.diffWork }}</strong>
          </div>
        </div>
      </div>
      <!-- 2 -->
      <div class="day-done-wrapper__item mt-8 relative" style="height: 150px">
        <div style="width: 400px;height: 200px" class="absolute chart-move">
          <v-charts :option="options2" style="width: 100%;height: 100%" />
        </div>
        <div class="absolute chart-info-move">
          <div class="flex align-center py-16 border-bottom-EBF0F5 relative pl-16">
            <span class="color-5A6F82">{{ $i18n.t('mesProductionDailyClear.planDone') }}</span>
            <strong class="ml-24">{{ dataItem.planFinish }}</strong>
          </div>
          <div class="flex align-center py-16 border-bottom-EBF0F5 relative pl-16">
            <span class="color-5A6F82">{{ $i18n.t("mesProductionDailyClear.actualCompletion") }}</span>
            <strong class="ml-24">{{ dataItem.realFinish }}</strong>
          </div>
          <div class="flex align-center py-16 border-bottom-EBF0F5 relative pl-16">
            <span class="color-5A6F82">{{ $i18n.t("mesProductionDailyClear.difference") }}</span>
            <strong class="ml-24">{{ dataItem.diffFinish }}</strong>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LineLogo from "./line-logo.vue";
import * as echarts from "echarts";
export default {
  components: { LineLogo },
  props: {
    dataItem: {
      type: Object,
      default: () => { }
    },
    titleDate: {
      type: String,
      default: ''
    }
  },
  watch: {
    dataItem: {
      handler(val) {
        if (val) {
          console.log(123,this.dataItem)
          this.formatOptions1(val.rateWork || '0.00')
          this.formatOptions2(val.rateFinish || '0.00')
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      options1: {},
      options2: {}
    }
  },
  methods: {
    formatOptions1(value) {
      this.options1 = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: '92%',
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[0.25, '#F26A60'], [0.5, '#F4BB5B'], [0.75, '#64B5EA'], [1, '#00BFA5']]
              }
            },
            axisTick: {
              length: 1,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '24%',
              width: 4,
              offsetCenter: [0, -60],
              itemStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              fontSize: 0,
              valueAnimation: true,
              formatter: [`{a|${value}%}`, `{b|${$i18n.t("mesProductionDailyClear.startCompletionRate")}`].join('\n'),
              offsetCenter: [0, '-40%'],
              rich: {
                a: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  height: 20
                },
                b: {
                  color: '#333',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 22
                }
              },
              color: 'auto'
            },
            data: [
              {
                value: value > 100 ? 100 : value
              }
            ]
          },
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: '100%',
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[0.25, '#F26A60'], [0.5, '#F4BB5B'], [0.75, '#64B5EA'], [1, '#00BFA5']],
                opacity: 0.5
              }
            },
            axisTick: {
              length: 1,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ],
        grid: {
          left: '2%'
        }
      }
    },
    formatOptions2(value) {
      this.options2 = {
        series: [
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: '92%',
            axisLine: {
              lineStyle: {
                width: 15,
                color: [[0.25, '#F26A60'], [0.5, '#F4BB5B'], [0.75, '#64B5EA'], [1, '#00BFA5']]
              }
            },
            axisTick: {
              length: 1,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '24%',
              width: 4,
              offsetCenter: [0, -60],
              itemStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              fontSize: 0,
              valueAnimation: true,
              formatter: [`{a|${value}%}`, `{b|${ $i18n.t("mesProductionDailyClear.completionRate") }}`].join('\n'),
              offsetCenter: [0, '-40%'],
              rich: {
                a: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  height: 20
                },
                b: {
                  color: '#333',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 22
                }
              },
              color: 'auto'
            },
            data: [
              {
                value: value > 100 ? 100 : value
              }
            ]
          },
          {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            radius: '100%',
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                width: 20,
                color: [[0.25, '#F26A60'], [0.5, '#F4BB5B'], [0.75, '#64B5EA'], [1, '#00BFA5']],
                opacity: 0.5
              }
            },
            axisTick: {
              length: 1,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            splitLine: {
              length: 20,
              lineStyle: {
                color: 'auto',
                width: 0
              }
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ],
        grid: {
          left: '2%'
        }
      }
    }
  }
}
</script>
<style lang="scss">
.day-done-production {
  .echarts {
    width: 100%;
    height: 100%;
  }

  .chart-move {
    left: -50px;
    top: 40px;
  }

  .chart-info-move {
    top: 10px;
    right: 10px;
    width: calc(100% - 300px);

    div:before {
      content: ' ';
      position: absolute;
      top: 20px;
      left: 0;
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background-color: #3d82ea;
    }
  }

  .border-bottom-EBF0F5 {
    border-bottom: 1px solid #ebf0f5;
  }

  .border-bottom-D3DFEB {
    border-bottom: 1px solid #d3dfeb;
  }

}
</style>
